Component({
  properties: {
    data: {
      type: Array,
      value: []
    },
    keys: {
      type: String,
      value: 'src'
    },
    delay: {
      type: [String, Number],
      value: 4
    },
    width: {
      type: [String, Number],
      value: ''
    },
    height: {
      type: [String, Number],
      value: 400
    }
  },

  data: {
    db_multis: false,
    isIndex: 1,
    copyindex: 0,
    delaytimes: 4,
    interval: null,
    isTouchMove: false,
    pageX: 0,
    imglist: [],
    showlist: [
      { src: '', text: '', type: 0, left: '50', z_index: '100', keys: 0, scale: 1 },
      { src: '', text: '', type: 0, left: '100', z_index: '90', keys: 0, scale: 0.9 },
      { src: '', text: '', type: 0, left: '0', z_index: '90', keys: 0, scale: 0.9 }
    ]
  },
  lifetimes: {
    attached() {

    },
    detached() {
      clearInterval(this.data.interval);
    }
  },

  observers: {
    'data': function (newData) {
      if (newData) {
        this.initialization();
        this.setData({
          delaytimes: Math.floor(this.properties.delay)
        });
        if (this.properties.data.length > 1 && this.data.delaytimes > 0) {
          this.setData({
            interval: setInterval(() => {
              this.revolve();
            }, Number(this.data.delaytimes) * 1000)
          });
        }
      }
    },
    'isTouchMove': function (newVal) {
      if (newVal) {
        wx.setNavigationBarTitle({
          title: 'overflow: hidden;'
        });
      } else {
        wx.setNavigationBarTitle({
          title: 'overflow: auto;'
        });
      }
    }
  },

  methods: {
    initialization() {
      const { data, keys } = this.properties;
      const imglist = [];
      data.forEach((item, index) => {
        const src = keys && item[keys] ? item[keys] : item.src;
        imglist.push({
          src: src,
          text: item.text || '',     // 新增 text
          type: item.type || 0       // 新增 type
        });
      });

      const showlist = [
        {
          src: imglist[0]?.src || '',
          text: imglist[0]?.text || '',  // 添加 text
          type: imglist[0]?.type || 0,   // 添加 type
          left: '50',
          z_index: '100',
          keys: 0,
          scale: 1
        },
        {
          src: imglist[1]?.src || '',
          text: imglist[1]?.text || '',
          type: imglist[1]?.type || 0,
          left: '100',
          z_index: '90',
          keys: 1,
          scale: 0.9
        },
        {
          src: imglist[2]?.src || imglist[imglist.length - 1]?.src || '',
          text: (imglist[2] || imglist[imglist.length - 1])?.text || '',
          type: (imglist[2] || imglist[imglist.length - 1])?.type || 0,
          left: '0',
          z_index: '90',
          keys: imglist.length - 1 || 0,
          scale: 0.9
        }
      ];

      this.setData({
        imglist,
        showlist,
        isIndex: 1,
        copyindex: imglist.length - 1,
        db_multis: imglist.length > 3
      });
    },

    revolve() {
      const { imglist, showlist, db_multis } = this.data;
      if (imglist.length < 2) return;

      const newShowlist = showlist.map(item => {
        if (item.left == 0) {
          const isIndex = this.data.isIndex == imglist.length - 1 ? 0 : this.data.isIndex + 1;
          if (db_multis) {
            this.setData({ isIndex });
            return {
              ...item,
              keys: isIndex,
              src: imglist[isIndex].src,
              text: imglist[isIndex].text,  // 同步更新 text
              type: imglist[isIndex].type,  // 同步更新 type
              left: imglist.length > 2 ? '100' : '0'
            };
          }
        } else if (item.left == 100) {
          return {
            ...item,
            z_index: '100',
            left: '50',
            scale: 1
          };
        } else if (item.left == 50) {
          return {
            ...item,
            z_index: '90',
            left: imglist.length == 2 ? '100' : '0',
            scale: 0.9
          };
        }
        return item;
      });

      this.setData({ showlist: newShowlist });
    },

    giveback() {
      const { imglist, showlist, db_multis, copyindex } = this.data;
      if (imglist.length < 2) return;

      const newShowlist = showlist.map(item => {
        if (item.left == 0) {
          return { ...item, z_index: '100', left: '50', scale: 1 };
        } else if (item.left == 100) {
          const newCopyindex = copyindex == 0 ? imglist.length - 1 : copyindex - 1;
          this.setData({ copyindex: newCopyindex });
          return {
            ...item,
            keys: newCopyindex,
            src: imglist[newCopyindex].src,
            z_index: '90',
            left: '0',
            text: imglist[newCopyindex].text,  // 同步更新 text
            type: imglist[newCopyindex].type   // 同步更新 type
          };
        } else if (item.left == 50) {
          return { ...item, z_index: '90', left: '100', scale: 0.9 };
        }
        return item;
      });

      this.setData({ showlist: newShowlist });
    },

    outputreturn(event) {
      const item = event.currentTarget.dataset.item;
      clearInterval(this.data.interval);

      if (item.left == 0) {
        this.giveback();
      } else if (item.left == 100) {
        this.revolve();
      } else {
        this.triggerEvent('achieve', this.properties.data[item.keys]);
      }

      if (this.properties.data.length > 1 && this.data.delaytimes > 0) {
        this.setData({
          interval: setInterval(() => {
            this.revolve();
          }, Number(this.data.delaytimes) * 1000)
        });
      }
    },

    handleStart(event) {
      this.setData({ pageX: event.changedTouches[0].pageX });
    },

    handleMove(event) {
      if (this.data.imglist.length < 1) return;
      clearInterval(this.data.interval);
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
      this.setData({ isTouchMove: true });
    },

    handleEnd(event) {
      if (!this.data.isTouchMove || this.data.imglist.length < 1) return;
      this.setData({ isTouchMove: false });

      const touch = event.changedTouches[0].pageX;
      if (this.data.pageX > touch && this.data.pageX - touch > 50) {
        this.revolve();
      } else if (this.data.pageX < touch && touch - this.data.pageX > 50) {
        this.giveback();
      }

      if (this.properties.data.length > 1 && this.data.delaytimes > 0) {
        this.setData({
          interval: setInterval(() => {
            this.revolve();
          }, Number(this.data.delaytimes) * 1000)
        });
      }
    }
  }
});